<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>家庭登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
    <style type="text/css">
        html,body{
    width: 100%;
    height: 100%;
}
body{
    background: url("/gradesign/img/bg-1.jpg") no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    animation-name:myfirst;
    animation-duration:12s;
    /*变换时间*/
    animation-delay:2s;
    /*动画开始时间*/
    animation-iteration-count:infinite;
    /*下一周期循环播放*/
    animation-play-state:running;
    /*动画开始运行*/
}
@keyframes myfirst
{
    0%   {background:url("/gradesign/img/bg-1.jpg") no-repeat ;background-size: 100% 100%;}
    34%  {background:url("/gradesign/img/bg-2.jpg") no-repeat;background-size: 100% 100%;}
    67%  {background:url("/gradesign/img/bg-3.jpg") no-repeat;background-size: 100% 100%;}
    100% {background:url("/gradesign/img/bg-1.jpg") no-repeat;background-size: 100% 100%;}
}
          
        .login-user{
            background-color: #FFFFFF;
            /* border: solid 1px #d8dee2; */
            width: 390px;
           /*  height: 280px; */
            padding-left: 5px;
            border-radius:5px;
            background: rgba(255,255,255,0.2);
            
        }
        .login-container{
            margin-top: 20px;
        }
        .form-label{
            font-size: 16px;
            font-weight: inherit;
            display: block;
            font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
        }
        .container-login{
            display: table;
            margin: auto;
        }
        .main{
            margin-top: 8%; 
            width: auto;
            
        }
        .row{
            margin-left: auto;
        }
        .user-verify{
            margin-left: 15px;
            margin-right: 15px;
        }
        .header{
            text-align: center;
            margin-top: 40px;
        }
        .form-group{
        	margin-bottom:5px;
        }
        .container-header{text-align: center}
        .alert{text-align: center; width: 400px;
            margin-left: 370px;}
        .form-group{margin-top: 10px;}
        .forget{text-align: right}
        .rememberMe{margin-left: -10px !important;}
        .register-now{margin-top: 20px;}
        .kuang{padding-left:0px;}
        .btn-block{width:60%;margin-left:60px;margin-top: 15px;}
        .validate{padding-left:7px}
    </style>
</head>
<body>
<!-- <div class="header">
    <img src="/gradesign/img/icon3.gif" alt=""/>
</div> -->
<div class="main">
    <div class="container container-custom">
        <div class="container-header">
            <h1>家庭记账系统</h1>
        </div>
        <div class="container-tip" id="error-tip">
            <div class="alert alert-warning alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                    &times;
                </button>
                    <strong style="text-align: center">错误！</strong>账号或密码错误
            </div>
        </div>
        <div class="row container-login">
            <div class="login-user">
                <div class="login-container">
                    <div class="user-info">
                        <div class="user-verify">
                            <table id="login-from">
                                <label class="form-label">家庭登录</label>
                                <div class="form-horizontal">
                                	<div class="row">
		                                <div class="form-group">
		                                	<label for="username" class="col-sm-3 control-label" style="line-height: 2;">账号</label>
		                                	<div class="col-sm-8 kuang">
		                                		<input type="text" name="username" id="username" class="form-control"  placeholder="FamilyAccount"/>
			                                    <div  class="family_account_error" style="display:none;color: #CE0000;height:30px;line-height:30px;" >
			                                        <span for="family_account" id="family_account_error"></span>
			                                    </div>
		                                	</div>
		                                </div>
	                            	</div>
	                            	
	                            	<div class="row">
		                                <div class="form-group">
		                                	<label for="password" class="col-sm-3 control-label" style="line-height: 2;">密码</label>
		                                	<div class="col-sm-8 kuang">
		                                		<input type="password" name="password" id="password" class="form-control"  placeholder="Password"/>
			                                    <div  class="family_password_error" style="display: none ;color: #CE0000;height:30px;line-height:30px;" >
			                                        <span for="family_password" id="family_password_error" ></span>
			                                    </div>
		                                	</div>
		                                </div>
	                           		</div>
	                            	<div class="row">
		                                <div class="form-group">
		                                	<label for="validate" class="col-sm-3 control-label" style="line-height: 2;">验证码</label>
		                                	<div class="col-sm-4 kuang">
		                                		<input type="text" name="randomcode" id="randomcode" class="form-control"  placeholder="Validate"/>
			                                    <div  class="family_validate_error" style="display: none ;color: #CE0000;height:30px;line-height:30px;" >
			                                        <span for="family_validate" id="family_validate_error"></span>
			                                    </div>
		                                	</div>
		                                	<div class="col-sm-4 validate">
		                                		<!-- <a href="javascript:void(0);"> -->
		                                			<img id="vali" src="/gradesign/getVerify" alt="验证码" onclick="changeVali(this)"></img>
		                                		<!-- </a> -->
		                                	</div>
		                                </div>
	                            	</div>
	                            	<div class="row"></div>
		                               <!--  <div class=" row forget-password form-group ">
		                                    <span class="col-xs-6 col-sm-6 col-md-6 col-lg-6 rememberMe">
		                                        <input type="checkbox" name="rememberMe" id="rememberMe" class="auto-login" />
		                                        <label for="rememberMe">下次自动登录</label>
		                                    </span>
		                                    <span class="col-xs-6 col-sm-6 col-md-6 col-lg-6 forget">
		                                        <a href="" >忘记密码</a>
		                                    </span>
		                                </div> -->
		                            <div class="row">
	                                	<button class="btn btn-primary btn-large f4 btn-block" onclick="login()">登 录</button>
	                                </div>
	                                <div class="register-now">
	                                    <span class="reg-tip">还没有创建家庭账号？<a href="/gradesign/login/regFamily">立即注册</a></span>
	                                     <a href="/gradesign/family/forgetPassword" >忘记密码</a>
	                                </div>
                                </div>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript">
    window.onload=function(){
        //隐藏账号密码出错提示
        var div = document.getElementById("error-tip");
        div.style.display="none";
    }
   	var flag = true;
   	
    function login(){
    	verify();
    	validateCode();
    	
    	if(flag){
    		var params= {};
    		params.username = $(username).val();
    		params.password = $(password).val();
    		params.randomcode = $(randomcode).val();
    		$.ajax({
    			url : "/gradesign/loginValidate",
    			type : "get",
    			data : params,
    			dataType : "json",
    			success : function(data){
    				if(data.result == "success"){
    					if(data.usertype == "back"){
    						window.location.href="/gradesign/back/index";
    					}else{
    						window.location.href="/gradesign/index";
    					}
    					
    				}else if(data.result == "verifyCodeError"){
    					alert("验证码错误！");
    				}else if(data.result == "usernameError"){
    					alert("家庭账户错误，请检查账户名后再试！");
    				}else if(data.result == "passwordError"){
    					alert("家庭密码错误！");
    				}
    			},
    			error : function(){
    				alert("系统错误，请联系管理员");
    			}
    		});
    	}
    	return false;	
	}
    $("#randomcode").blur(function(){
    	validateCode();
    })
    //验证填写验证码是否和服务器端存储验证码相同
   function validateCode(){
    	var params = {};
    	params.randomcode = $(randomcode).val();
    	$.ajax({
    		cache: false,
            async: false,
    		url : "/gradesign/validateCode",
			type : "POST",
			data : params,
			dataType : "json",
			success : function(data){
				if(data.result=="right"){
					flag = true;
				}else{
					//alert("验证码错误！");
					//alert($("#randomcode").val());
					/* if($('#randomecode').val()==null){
						$(".family_validate_error").show();
            			document.getElementById("family_validate_error").innerText="验证码不能为空！";
					}else{
						$(".family_validate_error").show();
            			document.getElementById("family_validate_error").innerText="验证码错误！";
					} */
					//alert($('#family_validate_error').text());
					if($('#family_validate_error').text()!='验证码不能为空'){
						$(".family_validate_error").show();
            			document.getElementById("family_validate_error").innerText="验证码错误！";	
					}
						
					flag = false;
				}
			},
			error : function(){
				alert("系统错误，请联系管理员");
			}
			})
    }
    function changeVali(obj){
    	//给一个随机数，以免从缓存中读取验证码
    	obj.src = "/gradesign/getVerify?"+Math.random();
    }
    function verify(){
        //保证数据唯一，家庭账户不能重复

        //空警告
        if(document.getElementById("username").value==""){
            $(".family_account_error").show();
            document.getElementById("family_account_error").innerText="家庭/成员账户不能为空";
        }else{
        	 $(".family_account_error").hide();
        }
        if(document.getElementById("password").value==""){
            $(".family_password_error").show();
            document.getElementById("family_password_error").innerText="家庭/成员密码不能为空";
        }else{
        	$(".family_password_error").hide();
        }
        if(document.getElementById("randomcode").value==""){
            $(".family_validate_error").show();
            document.getElementById("family_validate_error").innerText="验证码不能为空";
        }else{
        	 $(".family_validate_error").hide();
        	 document.getElementById("family_validate_error").innerText="验证码";
        }
    }
    function login_family() {
        verify();
        var params = {};
        params.username = $("#family_account")[0].value;
        params.familypassword = $("#family_password")[0].value;
        $.ajax({
        	url : "/gradesign/family/test",
        	method : "post",
        	data : params,
        	dataType:"json",
        	success : function(){
        		alert("1");
        	},
        	error : function(){
        		alert("2");
        	}
        });
    }
    /* document.getElementById("family_account").onchange=function () {
        $(".family_account_error").hide();
    }
    document.getElementById("family_password").onchange=function () {
        $(".family_password_error").hide();
    } */
</script>

</html>